import { colorStr, getQueryParams } from '@/utils/utils';
import { Menu } from 'antd';
import React from 'react';
import type { IRoute } from 'umi';
import { NavLink } from 'umi';
import styles from './index.less';

interface Props {
  color: string;
  thisRoute: string;
  menus: IRoute[];
}

const BackSider: React.FC<Props> = ({ menus, thisRoute }) => {
  const qs = getQueryParams();
  const { SubMenu } = Menu;

  return (
    <div className={styles.container} style={{ background: colorStr(4) }}>
      <Menu
        style={{ width: 280, backgroundColor: 'transparent', color: '#fff' }}
        defaultOpenKeys={['sub1', 'sub2', 'sub3', 'sub5']}
        defaultSelectedKeys={[thisRoute]}
        mode={'inline'}
        theme={'dark'}
      >
        {menus.map((menu) => {
          if (menu.routes) {
            return (
              qs.role === menu.role && (
                <SubMenu title={menu.title} key={menu.path}>
                  {menu.routes.map((submenu) => (
                    <Menu.Item key={submenu.path}>
                      <NavLink to={submenu.path as string}>{submenu.title}</NavLink>
                    </Menu.Item>
                  ))}
                </SubMenu>
              )
            );
          }
          return (
            qs.role === menu.role && (
              <Menu.Item key={menu.path}>
                <NavLink to={menu.path as string}>{menu.title}</NavLink>
              </Menu.Item>
            )
          );
        })}
      </Menu>
    </div>
  );
};

export default BackSider;
